/* eslint-disable semi */
<template>
    <div>
      <home-head/>

  <div class="wrap">
    <!-- 下拉刷新 包裹需要刷新的内容 -->
    <van-pull-refresh v-model="isLoading"  success-text="刷新成功" @refresh="onRefresh">
     <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
       <van-swipe-item v-for="banner in banners" :key="banner.id">
         <img :src="banner.picUrl" alt="">
       </van-swipe-item>
    </van-swipe>
    <!-- 宫格导航 -->
    <van-grid clickable icon-size="38px">
      <van-grid-item
      v-for="cate in cates"
      :key="cate.id"
      :icon="cate.icon"
      :text="cate.name"
      :to="{
        path:'/itemlist',
        query:{
          cateId:cate.id
        }
      }" />
    </van-grid>
    <!-- 推荐商品 -->
    <!-- 父向子传参 -->
    <!-- 上拉刷新 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
       :offset="50"
      @load="onLoad"

    >
    <recommend  :items="items"
    @deliveryId="enterDetail"
    @AddCartHome="AddCart"
    />
  </van-list>
  </van-pull-refresh>
  </div>
       <tabbar/>
    </div>
</template>

<script>
import { fetchCates, fetchBanner, fetchItems, addCart } from '@api'
import tabbar from '@components/Tabbar'
import HomeHead from './components/HomeHead.vue'
import Recommend from './components/Recommend.vue'
import { isLogin } from '@utils/isLogin'
import { Toast } from 'vant'

export default {
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      page: 1, // 当前页
      pageSize: 6, // 一页多少条
      isLoading: false, // true为加载中,加载完成会自动变成true 所以要手动改为false
      loading: false,
      finished: false
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanner()
  },

  methods: {
    AddCart (id) {
      if (isLogin()) {
        // 登录成功
        addCart({
          goodsId: id,
          number: 1,
          token: localStorage.getItem('token') || ''
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              total: res.data.data.price
            })
            Toast({
              type: 'success',
              duration: 500,
              message: '加入成功'
            })
          }
        })
      } else {
        Toast({
          message: '请先登录',
          onClose: () => {
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
      }
    },
    enterDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    // 上拉刷新
    onLoad () {
    //  在触底函数中 请求下一页数据 即page++ 重新请求商品函数
      this.fetchItems()
      this.page++
      // 函数请求成功 将loading 状态改为false 请求下一页
    },
    onRefresh () {
      // 数据请求成功 在商品数据请求函数中完成后 将isLoading: false
      // 当下拉刷新和上拉加载同时存在时 每次请求需要回到第一页数据 item设为空
      // 如果是 上拉到底 再执行上拉刷新 也需要将 finished设置为false
      this.page = 1
      this.items = []
      this.finished = false
      // 下拉刷新就是重新请求数据
      this.fetchItems()
      this.page++
    },
    // 获取分类数据
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = (res.data.data).slice(0, 8)
        }
      })
    },
    // 获取轮播图数据
    fetchBanner () {
      fetchBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 获取商品数据
    fetchItems () {
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 下拉刷新
        this.isLoading = false
        // 上拉加载
        this.loading = false
        // 数据加载完 将finished 改为true
        if (res.data.code === 700) {
          this.finished = true
        }
        if (res.data.code === 0) {
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    }
  },
  components: {
    tabbar,
    HomeHead,
    Recommend

  }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  margin-bottom: 50px;
  .my-swipe{
  img{
      width:100%
  }
  }
}
</style>
